<template>
  <div v-if="show" class="fixed inset-0 z-50 flex items-center justify-center">
    <!-- 背景遮罩 -->
    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" @click="close"></div>
    
    <!-- 对话框 -->
    <div class="relative bg-[#0a1a2f]/95 border border-[#00eaff]/30 rounded-lg shadow-lg w-[600px] max-h-[80vh] overflow-hidden">
      <!-- 标题栏 -->
      <div class="px-6 py-4 border-b border-[#00eaff]/20 flex justify-between items-center">
        <h3 class="text-[#00eaff] font-medium">导入坐标文本</h3>
        <button @click="close" class="text-[#00eaff] hover:text-[#00eaff]/80">
          <i class="fas fa-times"></i>
        </button>
      </div>

      <!-- 内容区 -->
      <div class="p-6 space-y-6">
        <!-- 文件选择 -->
        <div class="space-y-2">
          <div class="flex items-center justify-between">
            <span class="text-[#00eaff]/90">选择文件</span>
            <input
              type="file"
              accept=".txt"
              class="hidden"
              ref="fileInput"
              @change="handleFileSelect"
            />
            <button
              @click="$refs.fileInput.click()"
              class="px-4 py-2 bg-[#00eaff]/10 border border-[#00eaff]/30 rounded-lg text-[#00eaff] hover:bg-[#00eaff]/20 transition-colors"
            >
              选择TXT文件
            </button>
          </div>
          <div v-if="selectedFile" class="text-[#00eaff]/70 text-sm">
            已选择: {{ selectedFile.name }}
          </div>
        </div>

        <!-- 导入模板 -->
        <div class="space-y-4">
          <div class="text-[#00eaff]/90 mb-2">导入模板:</div>
          
          <!-- 点模板 -->
          <div class="bg-[#1e3a5c]/30 rounded-lg p-4 space-y-2">
            <div class="text-[#00eaff] font-medium">点导入模板</div>
            <pre class="text-[#00eaff]/70 text-sm whitespace-pre-wrap">
#Point
121.36329,30.98109
121.37329,30.99109
121.38329,30.97109</pre>
          </div>

          <!-- 线模板 -->
          <div class="bg-[#1e3a5c]/30 rounded-lg p-4 space-y-2">
            <div class="text-[#00eaff] font-medium">线导入模板</div>
            <pre class="text-[#00eaff]/70 text-sm whitespace-pre-wrap">
#Line
121.36329,30.98109
121.37329,30.99109
121.38329,30.97109
121.36329,30.98109</pre>
          </div>

          <!-- 面模板 -->
          <div class="bg-[#1e3a5c]/30 rounded-lg p-4 space-y-2">
            <div class="text-[#00eaff] font-medium">面导入模板</div>
            <pre class="text-[#00eaff]/70 text-sm whitespace-pre-wrap">
#Polygon
121.36329,30.98109
121.37329,30.99109
121.38329,30.97109
121.36329,30.98109</pre>
          </div>
        </div>
      </div>

      <!-- 底部按钮 -->
      <div class="px-6 py-4 border-t border-[#00eaff]/20 flex justify-end space-x-4">
        <button
          @click="close"
          class="px-4 py-2 text-[#00eaff]/90 hover:text-[#00eaff] transition-colors"
        >
          取消
        </button>
        <button
          @click="importFile"
          :disabled="!selectedFile"
          :class="[
            'px-4 py-2 rounded-lg transition-colors',
            selectedFile
              ? 'bg-[#00eaff]/20 text-[#00eaff] hover:bg-[#00eaff]/30'
              : 'bg-gray-500/20 text-gray-400 cursor-not-allowed'
          ]"
        >
          导入
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  show: Boolean,
  onImport: Function,
  onClose: Function
})

const selectedFile = ref(null)
const fileInput = ref(null)

const handleFileSelect = (event) => {
  selectedFile.value = event.target.files?.[0]
}

const importFile = async () => {
  if (!selectedFile.value) return
  props.onImport?.(selectedFile.value)
  close()
}

const close = () => {
  selectedFile.value = null
  if (fileInput.value) fileInput.value.value = ''
  props.onClose?.()
}
</script> 